<template>
  <div class="dropdown dropdown-end">
    <div tabindex="0" role="button"
         class="btn btn-sm btn-ghost gap-1 px-1.5 text-[.5625rem] font-bold"
         aria-label="Language" title="Change Language"><svg
        class="text-base-content/70 size-4" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24">
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2"
            fill="none" stroke="currentColor"
            d="M12 21a9 9 0 1 0 0-18m0 18a9 9 0 1 1 0-18m0 18c2.761 0 3.941-5.163 3.941-9S14.761 3 12 3m0 18c-2.761 0-3.941-5.163-3.941-9S9.239 3 12 3M3.5 9h17m-17 6h17">
      </path>
    </svg> <svg class="mt-px hidden size-2 fill-current opacity-60 sm:inline-block"
                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
      <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
    </svg></div>
    <div tabindex="0"
         class="dropdown-content bg-base-200 text-base-content rounded-box top-px mt-16 max-h-[calc(100vh-8.6rem)] w-56 overflow-y-auto border-[length:var(--border)] border-white/5 shadow-2xl outline-[length:var(--border)] outline-black/5">
      <ul class="menu menu-sm w-full">
        <li v-for="(language,index) in languages">
          <button :class="language.value==localConfigStore.language?'menu-active':''" @click="changeLanguage(language.value)">
            <span class="pe-4 font-mono text-[.5625rem] font-bold tracking-[0.09375rem] opacity-40">
              {{language.code}}
            </span>
            <span class="font-[sans-serif]">
              {{language.name}}
            </span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { useLocalConfigStore } from '@/stores/localConfig'
import { useConfigStore } from '@/stores/config'
import collect from 'collect.js'
const localConfigStore = useLocalConfigStore()
const configStore = useConfigStore()
export default {
  data() {
    const languages = [
  {
    code: "EN",
    name: "English",
    value: "en"
  },
  {
    code: "ZH",
    name: "简体中文",
    value: "zh-CN"
  },
  {
    code: "ZH",
    name: "繁體中文",
    value: "zh-TW"
  },
  {
    code: "AR",
    name: "العربية",
    value: "ar" // 阿拉伯语
  },
  {
    code: "BN",
    name: "বাংলা",
    value: "bn" // 孟加拉语
  },
  {
    code: "CA",
    name: "Català",
    value: "ca" // 加泰罗尼亚语
  },
  {
    code: "CS",
    name: "Čeština",
    value: "cs" // 捷克语
  },
  {
    code: "DE",
    name: "Deutsch",
    value: "de" // 德语
  },
  {
    code: "ES",
    name: "Español",
    value: "es" // 西班牙语
  },
  {
    code: "FA",
    name: "فارسی",
    value: "fa" // 波斯语
  },
  {
    code: "FR",
    name: "Français",
    value: "fr" // 法语
  },
  {
    code: "HU",
    name: "Magyar",
    value: "hu" // 匈牙利语
  },
  {
    code: "ID",
    name: "Bahasa Indonesia",
    value: "id" // 印尼语
  },
  {
    code: "IT",
    name: "Italiano",
    value: "it" // 意大利语
  },
  {
    code: "JA",
    name: "日本語",
    value: "ja"
  },
  {
    code: "KO",
    name: "한국어",
    value: "ko" // 韩语
  },
  {
    code: "MS",
    name: "Bahasa Melayu",
    value: "ms" // 马来语
  },
  {
    code: "PL",
    name: "Polski",
    value: "pl" // 波兰语
  },
  {
    code: "PT",
    name: "Português",
    value: "pt" // 葡萄牙语
  },
  {
    code: "RO",
    name: "Română",
    value: "ro" // 罗马尼亚语
  },
  {
    code: "RU",
    name: "Русский",
    value: "ru" // 俄语
  },
  {
    code: "UK",
    name: "Українська",
    value: "uk" // 乌克兰语
  },
  {
    code: "VI",
    name: "Tiếng Việt",
    value: "vi" // 越南语
  }
];
    return {
      localConfigStore:localConfigStore,
      languages: collect(languages) //系统支持的可选语言
      .keyBy('value')
      .only(configStore.config.locales)
      .values()
      .all()
    }
  },
  methods:{
    changeLanguage(language){
      localConfigStore.changeLanguage(language)
    }
  }
}

</script>
   
